<template>
  <!-- 查看详情dialog -->
  <el-dialog title="提示" :visible="dialogVisible" width="630px" @close="closeDialog" @open="openDialog">
    <!-- title -->
    <template #title>
      <span class="title">工单详情</span>
    </template>

    <!-- 中间的默认body -->
    <!-- 图片样式 -->
    <el-row class="bodyImg" type="flex" align="center">
      <el-col :span="2" type="flex" align="center">
        <i class="el-icon-warning" />
      </el-col>
      <el-col :span="16" class="bodyText">
        <span>取消</span>
      </el-col>
      <el-col :span="4">
        <img src="http://likede2-admin.itheima.net/img/pic_3.e8208e34.png" alt="">
      </el-col>
    </el-row>

    <!-- 正文样式 -->
    <el-form ref="form" :model="lookData" label-width="120px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="设备编号：">
            <span>{{ lookData.innerCode }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="创建日期：">
            <span>
              {{ lookData.createTime ? formatTime(lookData.createTime) : '没有' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取消日期：">
            <span>
              {{ lookData.updateTime ? formatTime(lookData.updateTime) :'没有' }}
            </span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="运营人员：">
            <span>{{ lookData.userName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单类型：">
            <!-- <span>{{ lookData.taskType.typeName }}</span> -->
            <span>{{ MapTypeId[+lookData.taskType.typeId] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="补货数量：">
            <span>{{ lookData.details }}</span>
            <el-link type="primary">接口还没写</el-link>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="工单方式：">
            <span>{{ MapCreateType[lookData.createType] }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="取消原因：">
            <span>{{ lookData.desc || '未填写' }}</span>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>

    <!-- 下面按钮 -->
    <template #footer>
      <el-row type="flex" justify="center">
        <el-button class="cencelBtn" size="medium">重新创建</el-button>
      </el-row>
    </template>
  </el-dialog>
</template>
<script>
import { detailList, getTask, taskTypeAll } from '@/api'
export default {
  props: {
    // 父传子的dialog控制变量
    dialogVisible: {
      type: Boolean,
      default: false
    },
    lookData: {
      type: Object,
      default: () => {}
    }
    // 读不到三层数据,又传了一个
    // taskType: {
    //   type: Object,
    //   default: () => {}
    // }
  },
  data() {
    return {
      // 处理工单类型
      MapTypeId: {
        1: '投放工单',
        2: '补货工单',
        3: '维修工单',
        4: '撤机工单'
      },
      typeList: [], // 所有工单类型
      getskList: [], // 工单状态
      // 处理工单方式
      MapCreateType: {
        0: '自动',
        1: '手动'
      }
    }
  },
  methods: {
    // 关闭dialog
    closeDialog() {
      this.$emit('closeLook')
    },
    // 打开弹窗
    async openDialog() {
      // 所有工单类型
      const res2 = await taskTypeAll()
      this.typeList = res2.data
      // 工单状态
      const res = await getTask()
      this.getskList = res.data
      // 补货的详情
      const { data } = await detailList(this.lookData)
      console.log(data)
    },
    // 处理时间
    formatTime(val) {
      // const abc = ''
      // this.$nextTick(() => {
      //   abc = val.replace(/T/gi, ' ')
      // })
      return val.replace(/T/gi, ' ')
    }
  }
}
</script>
<style lang="scss" scoped>
.title {
  line-height: 22px;
  font-size: 16px;
  font-weight: 600;
}
::v-deep .el-dialog {
  margin-top: 15vh;
  width: 630px;
  border-radius: 10px;
  position: relative;
  margin: 0 auto 50px;
  background: #fff;
}
.cencelBtn {
  width: 80px !important;
  height: 36px;
  padding: 0;
  background-color: #fbf4f0 !important;
  border: none;
  color: #655b56 !important;
}
.bodyImg {
  height: 54px;
  margin-bottom: 25px;
  background-color: hsla(0, 0%, 92.5%, 0.39);
}
.el-icon-warning {
  font-size: 26px;
  margin-left: 22px;
  line-height: 54px;
}
.bodyText {
  display: flex;
  align-items: center;
  padding-left: 15px;
}
// 复制的样式
.el-row {
  margin-bottom: 20px;
  &:last-child {
    margin-bottom: 0;
  }
}
.el-col {
  border-radius: 4px;
  height: 36px;
}
.bg-purple-dark {
  background: #99a9bf;
}
.bg-purple {
  background: #d3dce6;
}
.bg-purple-light {
  background: #e5e9f2;
}
.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
